<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>登录页</title>
    <script src="{% static '/jquery/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static '/layui/layui.js' %}"></script>
    <link rel="stylesheet" href="{% static '/layui/css/layui.css' %}">
    <style>
        body{
            background-image: url("{% static '/image/background.jpg' %}");
            background-size: cover; /* 让背景图片覆盖整个元素，同时保持图片的比例 */
            background-position: center; /* 确保图片在元素中居中 */
            background-repeat: no-repeat; /* 防止图片重复 */
            {#background-color: #4476A7;#}
            width: 100%; /* 确保元素宽度是100% */
            height: 100vh; /* 高度设置为视口高度，vh是视口高度的单位 */
        }

        .content{
            width: 400px;
            height: 330px;
            border-radius: 30px;
            {#border: 1px solid red;#}
            float: right;
            margin-right: 200px;
            margin-top: 200px;
            display: block; /* 确保是块级元素 */
            background-color: lightslategrey;
        }
        .form{
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中，如果需要的话 */
            height: 500px; /* 例如，父容器高度为视窗高度 */
        }
    </style>
</head>
<body>
<div class="content">
    <div class="form">
<!--        <h1>登 录</h1>-->
<!--        <h4>智慧体育管理</h4>-->
        <form class="layui-form" action="">
            <div class="layui-form-item">
<!--            <label class="layui-form-label">账号：</label>-->
                <div class="layui-input-inline">
                  <input type="text" style="width: 310px" name="username" required lay-verify="required" placeholder="请输入手机号码或工号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
<!--                <label class="layui-form-label">密码：</label>-->
                <div class="layui-input-inline">
                  <input type="password" style="width: 310px" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                  <button type="button" id="submit" class="layui-btn layui-btn-sm">提交</button>
                  <button type="button" class="layui-btn layui-btn-sm">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    $('#submit').click(function ()
    {
        var username = $('[name="username"]').val()
        var password = $('[name="password"]').val()
        $.ajax({
            url:"{% url 'index:checklogin' %}",
            data:{'username':username,'password':password},
            type:'POST',
            success:function(result){
                alert(result.msg)
                if(result.code == 1){
                    // 执行跳转
                    window.location.href = '{% url "index:backend" %}'
                }else{
                    // 执行页面刷新
                    location.reload()
                }
            }
        });
    })
</script>
<script>
//Demo
layui.use('form', function()
{
    var form = layui.form;
});
</script>
</html>